@page
@using Lion.AbpPro
@model Lion.AbpPro.Pages.Monitor


@{
    Layout = null;
}

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <title>后端服务</title>
</head>

<body>
<div class="container projects ">
    <div class="projects-header page-header">
        <h2>后端服务列表</h2>
        @* <p>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</p> *@
    </div>
    <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="thumbnail" style="height: 180px">
                <a href="@AbpProHttpApiHostConst.SwaggerUiEndPoint" target="_blank">
                    <img class="lazy" src="/images/swagger.png" width="300" height="150"/>
                </a>
                <div class="caption">
                    <h3>
                        <a href="@AbpProHttpApiHostConst.SwaggerUiEndPoint" target="_blank">SwaggerUI</a>
                    </h3>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="thumbnail" style="height: 180px">
                <a href="@AbpProHttpApiHostConst.CapDashboardEndPoint" target="_blank">
                    <img class="lazy" src="/images/cap.png" width="300" height="150"/>
                </a>
                <div class="caption">
                    <h3>
                        <a href="@AbpProHttpApiHostConst.CapDashboardEndPoint" target="_blank">CAP面板</a>
                    </h3>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="thumbnail" style="height: 180px">
                <a href="@AbpProHttpApiHostConst.HangfireDashboardEndPoint" target="_blank">
                    <img class="lazy" src="/images/hangfire.png" width="300" height="150"/>
                </a>
                <div class="caption">
                    <h3>
                        <a href="@AbpProHttpApiHostConst.HangfireDashboardEndPoint" target="_blank">Hangfire面板</a>
                    </h3>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="thumbnail" style="height: 180px">
                <a href="@AbpProHttpApiHostConst.MiniprofilerEndPoint" target="_blank">
                    <img class="lazy" src="/images/miniprofiler.png" width="300" height="150"/>
                </a>
                <div class="caption">
                    <h3>
                        <a href="@AbpProHttpApiHostConst.MiniprofilerEndPoint" target="_blank">Miniprofiler</a>
                    </h3>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="thumbnail" style="height: 180px">
                <a href="@AbpProHttpApiHostConst.MoreEndPoint" target="_blank">
                    <img class="lazy" src="/images/more.png" width="300" height="150"/>
                </a>
                <div class="caption">
                    <h3>
                        <a href="@AbpProHttpApiHostConst.MoreEndPoint" target="_blank">了解更多...</a>
                    </h3>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

</html>
<style>
    *:before,
    *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .container {
        width: 1170px;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

    .projects-header {
        width: 60%;
        text-align: center;
        font-weight: 200;
        display: block;
        margin: 60px auto 40px !important;
    }

    .page-header {
        padding-bottom: 9px;
        margin: 40px auto;
        border-bottom: 1px solid #eee;
    }

    .projects-header h2 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    h2 {
        margin-top: 20px;
        margin-bottom: 10px;
        font-weight: 500;
        line-height: 1.1;
        color: inherit;
        /* text-align: center; */
    }

    p {
        margin: 0 0 10px;
    }

    .row {
        margin-right: -15px;
        margin-left: -15px;
    }

    .col-lg-3 {
        width: 25%;
    }

    .projects .thumbnail {
        display: block;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
        margin-bottom: 30px;
        border-radius: 0;
    }

    .thumbnail {
        display: block;
        padding: 4px;
        line-height: 1.42857143;
        background-color: #fff;
        border: 1px solid #ddd;

        .

    transition(border 0.2 s ease-in-out);
    }

    a {
        color: #337ab7;
        text-decoration: none;
        background-color: transparent;
    }

    .projects .thumbnail img {
        max-width: 100%;
        height: auto;
    }

    .thumbnail a > img,
    .thumbnail > img {
        margin-right: auto;
        margin-left: auto;
    }

    img {
        vertical-align: middle;
    }

    /* .projects .thumbnail .caption {
      overflow-y: hidden;
      color: #555;
    } */
    .caption {
        padding: 9px;
        overflow-y: hidden;
        color: #555;
    }
</style>